<?php
session_start();
include_once 'check.php';

?>
<html>
    <title>Il mio vocabolario</title>
    <head>
        <link rel="icon" href="images/favicon.png" type="image/png" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link type="text/css" rel="stylesheet" href="css/main.css" />
        <link type="text/css" rel="stylesheet" href="css/default_table.css">
        <link type="text/css" rel="stylesheet" href="css/redmond/jquery-ui.css">
        <link type="text/css" rel="stylesheet" href="css/redmond/jquery.ui.theme.css">
        <body>
            <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
            <script type="text/javascript" src="js/jquery.dataTables.min.js" ></script>
            <script type="text/javascript" src="js/jquery-ui-1.10.4.min.js" ></script>
            <script type="text/javascript" src="js/jquery.ui.dialog.js" ></script>
            <script type="text/javascript" src="js/jquery.validate.min.js" ></script>
            <script>
            
                function htmlentities(str) {
                    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
                }

                // VARIABILI GLOBALI
                
                var oTable;
                var test_len=0;
                var test_result_ok=0;
                var test_result_ko=0;

                $(document).ready(function() { // $(function() {
                    
                    $( "#tabs" ).tabs();
                    
                    oTable = $('#words').dataTable({
                        "bLengthChange" : false,
                        "bScrollCollapse" : false,
                        "bSort" : false,
                        "bProcessing" : true,
                        "bServerSide" : true,
                        "sServerMethod" : "POST",
                        "sScrollX" : "100%",
                        "bAutoWidth" : false,
                        "iDisplayLength" : 10,
                        "iTabIndex" : 1,
                        "bPaginate" : true,
                        //"sPaginationType": "full_numbers",
                        "sAjaxSource" : "paging.php",
                        "sDom" : "Rlfrtip",
                        "oLanguage" : {
                            "sSearch" : "Ricerca: ",
                            "sInfo" : "da _START_ a _END_ di _TOTAL_ elementi",
                            "oPaginate" : {
                                "sNext" : "Avanti",
                                "sPrevious" : "Indietro",
                                "sFirst" : "Primo",
                                "sLast" : "Ultimo"
                            }
                        },
                        "aoColumns" : [{
                            "sWidth" : "5%"
                        }, {
                            "sWidth" : "20%"
                        }, {
                            "sWidth" : "60%"
                        }, {
                            "mData" : null,
                            "fnRender" : function(o) {
                                var id = o.aData[3];
                                var parola = o.aData[1];
                                var definizione = o.aData[2];
                                var button = "<input class='button-edit' data-id='"+id +"' data-parola='"+parola +"' data-definizione='"+definizione +"' type='button' value='modifica'></input>";
                                return button;
                            },
                            "sWidth" : "5%"
                        }, {
                            "mData" : null,
                            "fnRender" : function(o) {
                                var id = o.aData[3];
                                var parola = o.aData[1];
                                var button = "<input class='button-del' data-id='" + id + "' data-parola='"+parola+"' type='button' value=' elimina '></input>";
                                return button;
                            },
                            "sWidth" : "5%"
                        }]
                    });

                    $("#dialog-delete").dialog({
                        autoOpen : false,
                        resizable : false,
                        modal : true,
                        width : "400px",
                        buttons : {
                            "Procedere" : function() {
                                var id = $("#dialog-delete").data("data-id");
                                $(this).dialog("close");
                                location.href = 'controller.php?action=delete&id=' + id;
                            },
                            "Annulla" : function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                    
                    $("#dialog-insert").dialog({
                        autoOpen : false,
                        resizable : false,
                        modal : true,
                        width : "500px",
                        buttons : {
                            "Conferma" : function() {
                                var uid = htmlentities($("#dialog-insert input[name='uid']").val());
                                var parola = htmlentities($("#dialog-insert input[name='parola']").val());
                                var definizione = htmlentities($("#dialog-insert textarea[name='definizione']").val());
                                $(this).dialog("close");
                                location.href = 'controller.php?action=insert&parola='+parola+'&definizione='+definizione+'&uid='+uid;
                            },
                            "Annulla" : function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                    
                    $("#dialog-edit").dialog({
                        autoOpen : false,
                        resizable : false,
                        modal : true,
                        width : "400px",
                        open: function () {
                            var id = $(this).data("data-id");
                            var parola = $(this).data("data-parola");
                            var definizione = $(this).data("data-definizione");
                            $("#dialog-edit input[name='id']").val(id);
                            $("#dialog-edit input[name='parola']").val(parola);
                            $("#dialog-edit textarea[name='definizione']").val(definizione);
                        },
                        buttons : {
                            "Conferma" : function() {
                                var id = $("#dialog-edit").data("data-id");
                                var uid = htmlentities($("#dialog-edit input[name='uid']").val());
                                var parola = htmlentities($("#dialog-edit input[name='parola']").val());
                                var definizione = htmlentities($("#dialog-edit textarea[name='definizione']").val());
                                $(this).dialog("close");
                                location.href = 'controller.php?action=edit&id='+id+'&parola='+parola+'&definizione='+definizione+'&uid='+uid;
                            },
                            "Annulla" : function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                    
                    $('#button-insert').on('click', function() {              
                        $("#dialog-insert").dialog("open");
                        return false;
                    });
                    
                    $('#words').on('click', '.button-del', function() {
                        var id = $(this).attr("data-id");
                        var parola = $(this).attr("data-parola");
                        $("#dialog-delete").data("data-id", id).dialog("open");
                        $("#dialog-delete > div").text("la parola \""+parola+"\" verrà cancellata , procedere?");
                        return false;
                    });

                    $('#words').on('click', '.button-edit', function() {
                        var id = $(this).attr("data-id");
                        var parola = $(this).attr("data-parola");
                        var definizione = $(this).attr("data-definizione");
                        $("#dialog-edit")
                            .data("data-id", id)
                            .data("data-parola", parola)
                            .data("data-definizione", definizione).dialog("open");
                        return false;
                    });

                    $('#button-gentest').on('click', function() {           
                        // genera test 
                        var tot = oTable.fnSettings().fnRecordsTotal();   
                        var num = $("#select-numtest").val();
                        var uid = "<?php echo $_SESSION['uid'];?>;";
						if(num > tot){
							alert("Attenzione numero di parole del vocabolario insufficiente !");
						}
						else {
							$.ajax({
	                            url: "controller.php",
	                            data:{"action":"gentest","num":num,"uid":uid}, 
	                            success:function(data){
	                               $("#tab-test-content").html(data);
	                               $("#result").text("");
	                               test_len = num;
	                               test_result_ok=0;
	                               test_result_ko=0;
	                               $("#tab-test-content input[type='text']").keypress(function(event){
	                            	   if(event.keyCode == 13) {		
		                                   var val = $(this).val();
		                                   var id =  $(this).attr("id");
		                                   $.ajax({
		                                        url: "controller.php",
		                                        data:{
		                                            "action":"checktest",
		                                            "id":id,
		                                            "val":val
		                                        }, 
		                                        success:function(data){
		                                            if(data==="true"){
		                                                $("#img-"+id).html("<img src='images/ok_24.png'></img>");
		                                                test_result_ok++;
		                                            }else{
		                                                $("#img-"+id).html("<img src='images/ko_24.png'></img>");
		                                                test_result_ko++;
		                                            }
		                                            $("input[id="+id+"]").attr("disabled","disabled");
		                                            $("#solution-"+id).css("visibility","visible");
		                                            if(test_result_ok+test_result_ko==test_len){
		                                                //FINE 
		                                                alert("TEST COMPLETATO");
		                                                $("#result").text("Risultato "+test_result_ok+" risposte esatte su "+test_len); 
		                                            }   
		                                        }
		                                   });    
		                                   var currentIndex = $(this).attr("tabindex");
		                                   var nextIndex = parseInt(currentIndex)+1;
		                                   $("input[tabindex='"+nextIndex+"']").focus();
	                            	   }
	                                });
	                            }
	                         });
						}
                    });
                });
            </script>
            
            <div id = "content" >
            <div class="logo">
                <img src="images/logo.jpg" >
            </div>
            
            <div id="tabs">
            	
            	<div class="logout">
                    <span>utente: <b><?php echo $_SESSION['user']; ?></b></span>
                	<a href="controller.php?action=logout">Logout</a>
                </div>
                <ul>
                    <li><a href="#tab-vocabolario">Vocabolario</a></li>
                    <li><a href="#tab-test">Test</a></li>
                </ul>

                <div id="tab-vocabolario">
                    <div>
                        <input id="button-insert" class='button-insert' type='button' value=' Aggiungi parola '></input>
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0" class="display" id="words" width="100%">
                        <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th>Parola</th>
                                <th>Definizione</th>
                                <th>&nbsp;</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
        
                        </tbody>
                    </table>
                    <br/>
                </div>
                
                <div id="tab-test" >
                    <div>
                    	<div>
                    	<select id="select-numtest" class='select-test'>
                    		<option value="5">5</option>
                    		<option value="10">10</option>
                    		<option value="20">20</option>
                    	</select>
                        <input id="button-gentest" class='button-test' type='button' value=' Avvia Test'></input>
                        </div>
                        <div id="result"></div>
                        <div class="testbox" id="tab-test-content" >
                        </div>
                    </div>
                </div>
                
            </div>
            
            <div id="msg_error" class="msg_error" style="display:none;position:absolute;left:400px;top:50px;width:300px;height:50px;border: solid 2px red;padding:5px;" >
                <div style="color:red;text-align:center;">
                    Errore!
                </div>
            </div>
            <div id="msg_info" class="msg_info" style="display:none;position:absolute;left:400px;top:50px;width:300px;height:50px;border: solid 2px yellow;padding:5px;" ></div>

            
            <div id="dialog-delete" title="Attenzione!" style="display:none;">
                <div class="msg">
                </div>
            </div>
            
            <div class="finestra" id="dialog-insert" title="Inserimento termine" style="display:none;">
                <input name="uid" type="hidden" value="<?php echo $_SESSION['uid']; ?>"/>
                <label class="etichetta">Parola: </label><input name="parola" type="text"/><br/>
                <label class="etichetta">Definizione: </label><textarea name="definizione" cols="40" rows="5"></textarea><br/>
            </div>
            
            <div class="finestra" id="dialog-edit" title="Modifica termine" style="display:none;">
                <input name="uid" type="hidden" value="<?php echo $_SESSION['uid']; ?>"/>
                <label class="etichetta">Id: </label><input readonly name="id" type="text"/><br/>
                <label class="etichetta">Parola: </label><input name="parola" type="text"/><br/>
                <label class="etichetta">Definizione: </label><textarea name="definizione" cols="40" rows="5"></textarea><br/>
            </div>
			</div>
        </body>
</html>
